<template>
	<view class="wrapper-add-c">
		<!-- 客户信息 -->
		<view class="reve-info">
			<view class="title">客户信息</view>
			<view class="lists">
				<view class="item flex">
					<label>客户名称</label>
					<view class="label-content">
						<!-- <input type="text" placeholder="必填项" v-model.trim="name" @blur="checkName"> -->
						<input type="text" placeholder="必填项" :value="name" @input="nameChange" @blur="checkName">
					</view>
				</view>
				<view class="item flex">
					<label>联系人</label>
					<view class="label-content">
						<!-- <input type="text" placeholder="必填项"  v-model.trim="linkMan"> -->
						<input type="text" placeholder="必填项"  :value="linkMan" @input="linkManChange" @blur="linkManBlur">
					</view>
				</view>
				<view class="item flex">
					<label>联系电话</label>
					<view class="label-content">
						<!-- <input type="text" placeholder="必填项" v-model.trim="linkPhone"> -->
						<input type="text" placeholder="必填项" :value="linkPhone" @input="linkPhoneChange" @blur="linkPhoneBlur">
					</view>
				</view>
				<view class="item flex">
					<label>客户地址</label>
					<view class="label-content">	
							<view class="area" :class="[adSelect[0] ?'':'placeholder']" @click="toggleTab('adSelect')">{{adSelect[0]?adSelect.join(''):'请选择收货地址'}}</view>
					</view>
				</view>
				<view class="item flex">
					<label>详细地址</label>
					<view class="label-content">
						<!-- <input type="text" placeholder="详细地址"  v-model="addressDetail"> -->
						<input type="text" placeholder="详细地址"  :value="addressDetail" @input="cusChange" @blur="addressBlur">
					</view>
				</view>
				<view class="item flex">
					<label>店铺类型</label>
					<view class="label-content">
						<view class="area" :class="[checkedCats.label ?'':'placeholder']" @click="toggleTab('cusTypes')">{{checkedCats.label?checkedCats.label:'请选择店铺类型'}}</view>
					</view>
				</view>
				<view class="item flex">
					<label>业务归属人</label>
					<view class="label-content">
						<!-- 管理员选中业务归属人 -->
						<view v-if="cusType == 0" class="area" :class="[saleMan.label?'':'placeholder']" @click="toggleTab('saleMans')">{{saleMan.label?saleMan.label:'请选择业务员'}}</view>
						<!-- 业务员直接带出 -->
						<view v-else class="area" >{{userInfo.userName}}</view>
					</view>
				</view>
				<view class="item flex">
					<label>归属区域</label>
					<view class="label-content">
						<view class="area" :class="[salesArea.label?'':'placeholder']" @click="toggleTab('salesArr')">{{salesArea.label?salesArea.label:'请选择收货地址'}}</view>
					</view>
				</view>
				<view class="item flex">
					<label>发货仓库</label>
					<view class="label-content">
						<view class="area" :class="[defaultStore.label?'':'placeholder']" @click="toggleTab('storeArr')">{{defaultStore.label?defaultStore.label:'请选择收货地址'}}</view>
					</view>
				</view>
				<view class="item flex">
					<label>归属路线</label>
					<view class="label-content">
						<view class="area" :class="[routeDefault.label ?'':'placeholder']" @click="toggleTab('routeArr')">{{routeDefault.label?routeDefault.label:'请选择归属路线'}}</view>
					</view>
				</view>
				<view class="item flex">
					<label>回款周期</label>
					<view class="label-content">
						<!-- <input type="text" placeholder="请输入" cursor-spacing="20" v-model.trim="periodOfPayment"> -->
						<view class="area" :class="[periodOfPayment.label?'':'placeholder']" @click="toggleTab('investment')">{{periodOfPayment.label?periodOfPayment.label:'请选择回款周期'}}</view>
					</view>
				</view>
				<view class="item flex">
					<label>合同状态</label>
					<view class="label-content">
						  <radio-group class="flex" @change="contractChange">
							<label class="flex radio" v-for="(item) in contractArr" :key="item.value">
								<view>
									<radio :value="item.value" :checked="contractStatus == item.value"/>
								</view>
								<view>{{item.name}}</view>
							</label>
						</radio-group>
					</view>
				</view>
				<view class="item flex">
					<label>打印设置</label>
					<view class="label-content">
						<radio-group class="flex" @change="printChange">
							<label class="flex radio" v-for="(item) in printArr" :key="item.value">
								<view>
									<radio :value="item.value" :checked="printSet == item.value"/>
								</view>
								<view>{{item.name}}</view>
							</label>
						</radio-group>
					</view>
				</view>
				<view class="item flex">
					<label><text style="visibility: hidden;">备注</text>备注</label>
					<view class="label-content">
						<!-- <input type="text" placeholder="必填项" v-model.trim="name" @blur="checkName"> -->
						<textarea placeholder='商家备注' auto-height style="width: 100%;box-sizing: border-box;" v-model.trim="memo"/>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 商品信息 -->
		<view class="goods-info">
			<view class="title">商品信息</view>
			<view class="table-c">
				<!-- <v-table :columns="columnsOperate" :list="dataOperate" @delete="deleteFn" @edi="ediFn"></v-table> -->
				<t-table>
					<t-tr >
						<t-th :fixedWidth="160">商品名称</t-th>
						<t-th :fixedWidth="140">商品分类</t-th>
						<t-th :fixedWidth="160">优惠单价</t-th>
						<t-th v-if="cusType == 0" :fixedWidth="134">提成</t-th>
						<t-th v-else :fixedWidth="134">单位</t-th>
						<t-th class="flex-1">数量</t-th>
					</t-tr>
					<t-tr v-for="(item,index) in dataOperate" :key="index">
						<t-td :fixedWidth="160">{{item.goodsText}}</t-td>
						<t-td :fixedWidth="140">{{ item.catsText }}</t-td>
						<t-td :fixedWidth="160" @click="togglePopup('center', 'tip',item)">{{ item.discountPrice }}</t-td>
						<t-td v-if="cusType == 0" :fixedWidth="134" @click="togglePopup('center', 'tip',item)">{{ item.commission }}</t-td>
						<t-td v-else :fixedWidth="134" >{{ item.specsText }}</t-td>
						<t-td class="flex-1" @click="togglePopup('center', 'tip',item)">{{ item.num }}</t-td>
					</t-tr>
				</t-table>
			</view>
		</view>
		<!-- 优惠价和数量编辑 -->
		<uni-popup ref="showtip" :type="type">
			<view class="uni-tip">
				<view class="hd flex">
					<view>请输入</view>
					<view>
						<uni-icons type="guanbi1" size="24" color="#fff" @click="cancel('tip')"></uni-icons>
					</view>
				</view>
				<view class="bd flex">
					<view class="item flex">
						<view class="label">优惠价:</view>
						<view class="ipt">
							<input type="digit" v-model.trim="tempDisPrice" />
						</view>
					</view>
					<!-- 管理员可以设置提成 -->
					<view class="item flex" v-if='cusType == 0'>
						<view class="label">提成:</view>
						<view class="ipt">
							<input type="digit" v-model.trim="tempRoyalty" />
						</view>
					</view>
					<view class="item flex">
						<view class="label">数量:</view>
						<view class="ipt">
							<input type="digit" v-model.trim="tempChangeNum" />
						</view>
					</view>
					<view class="btns">
						<button type="primary" size="mini" @click="changeDisPrice('tip')">确定</button>
						<button type="default" size="mini" @click="cancel('tip')">取消</button>
					</view>
				</view>
			</view>
		</uni-popup>
		<!--订单提交 -->
		<view class="button">
			<button type="primary" @click="validate">保存</button>
		</view>
		<w-picker
			mode="region"
			:defaultVal="regionDval"
			:areaCode="['33','3301','330108']"
			:hideArea="false"
			@confirm="onConfirm" 
			ref="region"
			:timeout="true"
		></w-picker>
		<!-- 客户地址选择 -->
		<w-picker
			mode="region"
			:defaultVal="regionDval"
			:hideArea="false"
			@confirm="onConfirm" 
			ref="adSelect"
			:timeout="true"
			themeColor="#f00"
		></w-picker>
		<w-picker
			mode="date" 
			startYear="2017" 
			endYear="2030"
			defaultVal="2019-10-31"
			:current="true" 
			@confirm="onConfirm"
			:disabledAfter="false"
			ref="date" 
			themeColor="#f00"
		></w-picker>
		
		<!-- 店铺类型选择 -->
		<w-picker
		  v-if="cusTypes.length > 0"
			mode="selector" 	
			@confirm="onConfirm" 
			ref="cusTypes" 
			themeColor="#f00"
			:selectList="cusTypes"
		></w-picker>
		<!-- 销售区域选择 -->
		<w-picker
			v-if="salesArr.length > 0"
			mode="selector" 
			@confirm="onConfirm" 
			ref="salesArr" 
			themeColor="#f00"
			:selectList="salesArr"
		></w-picker>
		<!-- 默认发货仓库选择 -->
		<w-picker
			v-if="storeArr.length > 0"
			mode="selector" 
			@confirm="onConfirm" 
			ref="storeArr" 
			themeColor="#f00"
			:selectList="storeArr"
		></w-picker>
		<!-- 默认归属路线 -->
		<w-picker
			v-if="routeArr.length > 0"
			mode="selector" 
			@confirm="onConfirm" 
			ref="routeArr" 
			themeColor="#f00"
			:selectList="routeArr"
		></w-picker>
		<!-- 业务员选择 -->
		<w-picker
			v-if="saleMans.length > 0"
			mode="selector" 
			@confirm="onConfirm" 
			ref="saleMans" 
			themeColor="#f00"
			:selectList="saleMans"
		></w-picker>
		<!-- 回款周期选择 -->
		<w-picker
			mode="selector" 	
			@confirm="onConfirm" 
			default-type="label"
			ref="investment" 
			themeColor="#f00"
			:selectList="investment"
		></w-picker>
	</view>
</template>

<script>
	import {
	  mapState
	 } from 'vuex'
	import Request from '@/request/request.js'
	import tTable from '@/components/t-table/t-table.vue';
	import tTh from '@/components/t-table/t-th.vue';
	import tTr from '@/components/t-table/t-tr.vue';
	import tTd from '@/components/t-table/t-td.vue';
	import uniIcons from '@/components/uni-icon/uni-icon.vue'
	import wPicker from "@/components/w-picker/w-picker.vue";
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default {
		components: {
			tTable,
			tTh,
			tTr,
			tTd,
			uniIcons,
			wPicker,
			uniPopup
		},
		data() {
			return {
				name:'',//客户名称
				tempName:'',//客户名称中间量
				linkMan:'',//联系人
				tempLinkMan:'',//联系人中间量
				linkPhone:'',//联系电话
				tempLinkPhone:'',//联系电话中间量
				type:'',//弹出框位置
				memo:'',//商家备注
				regionDval:['浙江省','杭州市','滨江区'],
				toggleType:'',	
				dataOperate: [],//默认商品数据列表
				cusTypes:[],//店铺类型
				checkedCats:{},//选中店铺
				adSelect:[],//客户地址省市区
				addressDetail:'',//详细地址
				tempAddressDetail:'',//用户地址中间量
				checkedArr:[0,0,0],//申明选择数据用于维护区域仓库线路级联数据
				selectTree:[],
				salesArr:[],//销售区域
				salesArea:{},//选中销售区域
				storeArr:[],//默认仓库
				defaultStore:{},//选中存储仓库
				routeArr:[],//归属路线
				routeDefault:{},//选中线路
				saleMans:[],//业务员集合
				saleMan:{},
				printArr:[//打印设置
					{name:'显示价格',value:'1'},
					{name:'不显示价格',value:'0'}
				],
				printSet:'0',//打印设置状态
				contractArr:[//合同状态
					{name:'已签',value:'1'},
					{name:'未签',value:'0'}
				],
				contractStatus:'0',//合同签订状态
				selectItem:{},//选中需要修改的商品项
				tempChangeNum:'',//修改数量中间量
				tempDisPrice:'',//修改优惠价中间量
				tempRoyalty:'',//管理员提成修改中间量
				subFlag:false,// 保存标识 防止多次点击
				periodOfPayment:{},//回款周期
				investment:[{label:'一个月',id:1},{label:'二个月',id:2},{label:'三个月',id:3}]
			}
		},
		onLoad() {
			this.getCusTypes()//获取店铺类型
			this.getSlectTree() //销售区域级联数据查询
			this.getGoods() //客户默认商品列表
			this.getSalesMan() //加载业务员列表
		},
		computed:{
			 ...mapState(['cusType','userInfo']),
		},
		methods: {
			cusChange(e){
				this.tempAddressDetail = e.detail.value
			},
			addressBlur(){
				this.addressDetail =  this.tempAddressDetail 
			},
			nameChange(e){
				this.tempName = e.detail.value
			},
			linkManChange(e){
				this.tempLinkMan = e.detail.value
			},
			linkManBlur(){
				this.linkMan = this.tempLinkMan
			},
			linkPhoneChange(e){
				this.tempLinkPhone = e.detail.value
			},
			linkPhoneBlur(){
				this.linkPhone = this.tempLinkPhone
			},
			bindPickerChange(e){
				console.log(e)
			},
			checkName(){
				this.name = this.tempName
				if(!this.name){
					uni.showToast({
					    title: '客户名称为必填选项',
						icon:'none',
					    duration: 1500
					});
					return
				}
				Request({
					url:'customer/checkUnique',
					data:{
						name:this.name
					}
				}).then(res => {
					if(res.msg == 1){
						uni.showToast({
						    title: '客户名称重复!!!',
							icon:'none',
						    duration: 1500
						});
					}
				}).catch(err => {})
			},
			toggleTab(str){
				// #ifdef APP-PLUS
				plus.key.hideSoftKeybord()
				// #endif
				this.toggleType = str
				if(str == 'storeArr'&& !this.salesArea.label){
					uni.showToast({
					    title: '请先选中销售区域',
						icon:'none',
					    duration: 1500
					});
					return
				}
				this.$refs[str].show();
			},
			contractChange(e){
				this.contractStatus = e.target.value
			},
			printChange(e){
				this.printSet = e.target.value
			},
			onConfirm(val){
				console.log(val)
				switch(this.toggleType){
					case 'region':
						this.area = val.result;
						break
					case 'date':
						this.date = val.result;
						break;
					case 'saleMans':
						this.saleMan = val.checkArr;
						break;
					case 'cusTypes':
						this.checkedCats = val.checkArr;
						break;
					case 'adSelect':
						this.adSelect = val.checkArr;
						break;
					case 'salesArr':
						if(this.checkedArr[0] != val.defaultVal[0]){
							this.checkedArr[0] = val.defaultVal[0]
							this.checkedArr[1] = 0
							this.salesArea = this.salesArr[this.checkedArr[0]]
							this.defaultStore = {}
							this.storeArr = this.sortData(this.selectTree[this.checkedArr[0]].sub)
							this.routeDefault = {}
							this.routeArr = []	
						}else{
							this.salesArea = this.salesArr[this.checkedArr[0]]
							this.storeArr = this.selectTree[this.checkedArr[0]].sub
						}
						
						break;
					case 'storeArr':
						if(this.checkedArr[1] != val.defaultVal[0]){
							this.checkedArr[1] = val.defaultVal[0]
							this.defaultStore = val.checkArr
							this.routeDefault = {}
							this.routeArr =val.checkArr ?  this.sortData(this.selectTree[this.checkedArr[0]].sub[this.checkedArr[1]].sub):[]
						}else{
							this.defaultStore = val.checkArr 
							this.routeArr = val.checkArr? this.sortData(this.selectTree[this.checkedArr[0]].sub[this.checkedArr[1]].sub):[]
						}		
						break;
					case 'routeArr':
						this.routeDefault = val.checkArr || ''
						break;
					case 'investment':
						this.periodOfPayment = val.checkArr;
						break
					
				}
			},
			getGoods(){
				//获取客户默认商品列表
				Request({
					url:'customer/loadDefaultgoodsByGoodsInfo',
					method:'GET'
				}).then(res => {
					if(res.code == 0){
						this.dataOperate = res.data
					}
				}).catch(err =>{})
			},
			getSalesMan(){
				// 获取业务员列表
				Request({
					url:'customer/loadSalesMan',
					method:'GET'
				}).then(res => {
					if(res.code == 0){
						this.saleMans = res.data.map(item => {
							let obj = {}
							obj.label = item.userName
							obj.value = item.userId
							return obj
						})
					}
				}).catch(err =>{})
			},
			getCusTypes(){
				Request({
					url:'customer/loadCustCats',
					method:'GET'
				}).then(res => {
					if(res.code == 0){
						this.cusTypes = this.sortData(res.data)
						console.log(this.cusTypes)
					}
				}).catch(err =>{})
			},
			getSlectTree(){
				// 级联查询销售区域->仓库->线路 json数据
				Request({
					url:'customer/selectLv',
					method:'GET'
				}).then(res => {
					this.selectTree = res
					this.salesArr = this.sortData(res)
				}).catch(err =>{})
			},
			sortData(arr){
				//picker 数据格式化
				let objArr = []
				objArr = arr.map(item => {
					let obj = {}
					obj.label = item.name
					obj.value = item.id
					return obj
				})
				return objArr
			},
			togglePopup(type, open,item) {
				this.selectItem = item
				this.tempChangeNum = this.selectItem.num || '0'
				this.tempDisPrice = this.selectItem.discountPrice || '0'
				this.tempRoyalty = this.selectItem.commission || '0'
				this.type = type
				this.$nextTick(() => {
					this.$refs['show' + open].open()
				})
			},
			cancel(type) {
				this.$refs['show' + type].close()
			},
			changeDisPrice(type){
				
				if(Number(this.tempDisPrice) < Number(this.selectItem.zdPrice)){
					uni.showToast({
						title:'优惠价设置小于最低价!',
						icon:'none',
						duration:1000
					})
					return
				}else if(Number(this.tempDisPrice) > Number(this.selectItem.bzPrice)){
					uni.showToast({
						title:'优惠价设置高于标准价!',
						icon:'none',
						duration:1000
					})
					return
				}else if(this.tempRoyalty*100 > 30){
					uni.showToast({
						title:'销售提成设置高于30%!',
						icon:'none',
						duration:1000
					})
					return
				}else{
					this.selectItem.num = this.tempChangeNum
					this.selectItem.discountPrice = this.tempDisPrice
					this.selectItem.commission = this.tempRoyalty
				}
				this.$refs['show' + type].close()
			},
			validate(){
				
				if(!this.name){
					uni.showToast({
					    title: '请输入客户名称',
						icon:'none',
					    duration: 1500
					});
					return
				}
				if(!this.linkMan){
					uni.showToast({
					    title: '请输入联系人',
						icon:'none',
					    duration: 1500
					});
					return
				}
				if(!this.linkPhone){
					uni.showToast({
					    title: '请输入联系电话',
						icon:'none',
					    duration: 1500
					});
					return
				}
				if(this.adSelect.length == 0){
					uni.showToast({
					    title: '请选择送货地址',
						icon:'none',
					    duration: 1500
					});
					return
				}
				if(!this.addressDetail){
					uni.showToast({
					    title: '请输入详细地址',
						icon:'none',
					    duration: 1500
					});
					return
				}
				if(!this.salesArea.label){
					uni.showToast({
					    title: '请选择销售区域',
						icon:'none',
					    duration: 1500
					});
					return
				}
				if(!this.periodOfPayment.label){
					uni.showToast({
					    title: '请选择回款周期',
						icon:'none',
					    duration: 1500
					});
					return
				}
				let params = {
					name:this.name,
					linkMan:this.linkMan,
					linkPhone:this.linkPhone,
					province:this.adSelect[0],
					city:this.adSelect[1],
					district:this.adSelect[2],
					address:this.addressDetail,
					customerCatsId:this.checkedCats.value,
					salesAreaId:this.salesArea.value,
					defaultStoreId:this.defaultStore&&this.defaultStore.value,
					routeId:this.routeDefault&&this.routeDefault.value,
					salesMan:this.saleMan.value,
					periodOfPayment:this.periodOfPayment.id,
					contractStatus:this.contractStatus,
					printSet:this.printSet,
					memo:this.memo
				}
				params.defaultGoods = this.dataOperate.map(item => {
					let obj = {}
					obj.goodsId = item.goodsId
					obj.discountPrice = item.discountPrice
					obj.num = item.num
					obj.commission = item.commission
					return obj
				})
				this.submit(params)
			},
			submit(params){
				console.log(params)
				if(this.subFlag) return;
				this.subFlag = true
				Request({
					url:'customer/addSave',
					data:params
				}).then(res =>{
					this.subFlag = false
					if(res.code == 0){
						uni.showToast({
						    title: '操作成功!',
							icon:'none',
						    duration: 1500
						});
						setTimeout(() => {
							uni.switchTab({
								url:'/pages/home/home'
							})
						})
					}
				}).catch(err => {this.subFlag = false})
			}
		}
	}
</script>

<style lang="less" scoped>
	@bottomColor: #c0c4cc;
.wrapper-add-c{
	min-height: 100%;
	background-color: #FFFFFF;
	.reve-info{
		.title{
			height: 88rpx;
			line-height: 88rpx;
			background-color: rgba(238, 238, 238, 1);
			padding: 0 40rpx;
			&::before{
				content: "*";
			}
		}
		.lists{
			.item{
				min-height: 80rpx;
				align-items: center;
				border-bottom: 2rpx solid @bottomColor;
				padding: 10rpx 40rpx;
				label{
					width: 180rpx;
					flex-shrink: 0;
				}
				.label-content{
					flex: 1;
					width: 0;
					radio{
						transform: scale(.7);
					}
					label{
						width: 240rpx;
						font-weight: 500;
					}
					.date,.area{
						height: 80rpx;
						line-height: 80rpx;
					}
					.placeholder{
						color: grey;
					}
				}
			}
		}
	}
	.goods-info{
		margin-bottom: 20rpx;
		.title{
			height: 88rpx;
			line-height: 88rpx;
			background-color: rgba(238, 238, 238, 1);
			padding: 0 40rpx;
			&::before{
				content: "*";
			}
		}
		.table-c{
			padding: 20upx;
			.flex-1{
				flex:1
			}
			.c-mini{
				background-color:red;
				line-height: 1.2;
				padding-left: 8rpx;
				padding-right: 8rpx;
				&.del{
					padding-left: 14rpx;
					padding-right: 14rpx;
				}
			}
			t-td{
				button{
					display: inline-block;
					width: 46rpx;
					height: 46rpx;
					line-height: 46rpx;
					text-align: center;
					&+button{
						margin-left: 6rpx;
					}
				}
			}
			
		}
	}
	.button{
		padding: 0 40rpx 80rpx;
	}
	/* 提示窗口 */
	.uni-tip {
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: column;
		/* #endif */
		// padding: 15px;
		width: 290px;
		background-color: #fff;
		border-radius: 10px;
		overflow: hidden;
		.hd{
			height: 80rpx;
			background: #1784da;
			justify-content: space-between;
			align-items: center;
			font-size: 28rpx;
			color: #fff;
			padding:0 20rpx 0 40rpx;
		}
		.bd{
			flex-direction: column;
			padding: 40rpx;
			.item{
				align-self: center;
				align-items: center;
				margin-bottom: 30rpx;
				.label{
					width: 120rpx;
					padding-right: 16rpx;
					text-align: right;
				}
				.ipt{
					width: 280rpx;
					height: 70rpx;
					border: 1px solid #C0C0C0;
					text-align: center;
					display: flex;
					align-items: center;
					// padding: 16rpx 0;
				}
			}
			.btns{
				text-align: center;
				button[type=primary]{
					background-color:#1784da ;
				}
				button[size=mini]{
					padding: 0 30rpx;
				}
				button+button{
					margin-left: 24rpx;
				}
			}
		}
	}
	
}

</style>
